import 'intersection-observer'
import React, { Component } from 'react'
import { reportClick } from '@/utils/ping'
import { projectId } from '@/utils/constants'

export default class Exposure extends Component {
	componentDidMount() {
		const intersectionObserver = new IntersectionObserver((entries) => {
			// 如果不可见，就返回
			if (entries[0].intersectionRatio <= 0) return null
			intersectionObserver.unobserve(document.getElementById(this.props.floorName))
			console.log('这是曝光埋点', this.props.floorName)
			let eventId = ''
			let eventParam = ''
			switch (this.props.floorName) {
				case 'progress':
					eventId = 'Mhelp_StoryDetail_RateofProjectExpo'
					eventParam = `${projectId}`
					break
				case 'priceChoose':
					eventId = 'Mhelp_StoryDetail_GearEntreExpo'
					eventParam = `${projectId}`
					break
				case 'story':
					eventId = 'Mhelp_StoryDetail_StoryExpo'
					eventParam = `${projectId}`
					break
				default:
					eventId = ''
					eventParam = ''
			}
			if (eventId !== '') {
				reportClick({ eventId, eventParam })
			}
		})
		intersectionObserver.observe(document.getElementById(this.props.floorName))
	}

	render() {
		return (
			<div
				style={{ height: 0, width: '100%', position: 'absolute' }}
				id={this.props.floorName}
			/>
		)
	}
}
